{% extends data.outerLayout %}
{% block title %}{{ __ns('apostrophe', "Password Reset Request") }}{% endblock %}
{% set errors = {
  error: 'An error occurred. Please try again.',
  missing: 'You did not supply your username or email address.'
} %}

{% block bodyClass %}apos-login-page apos-password-reset-request-page{% endblock %}

{% block main %}
  <div class="apos-login-wrapper">
    <div class="apos-login-content">
      <div class="apos-login-logo">{% block logo %}{% include "apostrophe-admin-bar:logo.html" %}{% endblock %}</div>
      <div class="apos-ui apos-login">
        <div class="apos-login-title apos-text-title">{% block subHeading %}{{ __ns('apostrophe', 'Password Reset') }}{% endblock %}</div>
        {% block form %}
          <form action="{% block action %}{{ apos.prefix }}/password-reset-request{% endblock %}" method="post">
            {% if data.error %}<div class="apos-login-warning">{{ __ns('apostrophe', errors[data.error]) }}</div>{% endif %}
            {% block fields %}
              <div class="apos-field apos-login-username">
                <label class="apos-field-label" for="username">{{ __ns('apostrophe', 'Username or Email') }} {% block usernameHint %}{% endblock %}</label>
                <input class="apos-field-input apos-field-input-text" type="text" name="username" id="username" autofocus />
              </div>
            {% endblock %}
            <div class="apos-login-submit">
              <input type="submit" class="apos-button apos-button--major" value="{% block buttonLabel %}{{ __ns('apostrophe', 'Request Password Reset') }}{% endblock %}" />
            </div>
            <div class="apos-login-reset-cancel">
              <a href="{{ apos.prefix }}{{ data.loginUrl }}">{{ __ns('apostrophe', 'Cancel') }}</a>
            </div>
            <p class="apos-login-password-reset-help">After you submit this form, an email message will be sent to you with instructions to complete the process. If you still do not see it after a few minutes, make sure you check your spam folder.</p>
          </form>
        {% endblock %}
      </div>
    </div>
  </div>
{% endblock %}
